﻿
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<!--<![endif]-->
<head>
    <!-- Basic Page Needs
                ================================================== -->
    <meta content="en-us" http-equiv="Content-Language" />
    <title>Test Image</title>
    <meta name="description" content="" />
    <meta name="author" content="" />
    <!-- Mobile Specific Metas
      ================================================== -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <!-- CSS
      ================================================== -->    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'/>
    <link rel="stylesheet" href="../css/base.css" />
    <link rel="stylesheet" href="../css/skeleton.css" />
    <link rel="stylesheet" href="../css/layout.css" />
    <link rel="stylesheet" href="../css/site.css" />    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <!--[if lt IE 9]>
		    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	    <![endif]-->
    <!-- Favicons
	    ================================================== -->
    <link rel="shortcut icon" href="/img/favicon.ico" />
    <script type="text/javascript">
        $(document).ready(function () {
            $(".doc-section").click(function () {
                if ($(".doc-section").css("visibility") == "visible") {
                    $(".doc-section").css("visibility", "hidden");
                    $(".photo_comments").css("visibility", "visible");
                    $(".info_comments").css("display", "none");
                }
            });
            $(".comment_photograph").click(function() {
                $(".doc-section").css("visibility", "visible");
                $(".photo_comments").css("visibility", "hidden");
                $(".info_comments").css("display", "inline");
            });

            $(".doc-section").hover(
                function() {
                    $(".info_comments").css("visibility", "visible");

                },
                function() {
                    $(".info_comments").css("visibility", "hidden");
                });
            
        });
    </script>

</head>
<body>
               <div class="container">
        <div class="columns sixteen">
            <div class="row">
                <div class="six columns" id="logo">
                    <a href="http://localhost:8080/">markgroves</a>
                </div>
                    <div class="nine columns">
                        <ul id="nav">
                            <li>Photography</li>
                            <li><a href="/index.html">blog</a></li>
                            <li><a href="/about.html">about</a></li>
                        </ul>
                    </div>
            </div>
        </div>
        <div class="three columns sidebar">

        </div>
        <div class="sixteen columns">
            <div class="doc-section" style="z-index: 3; position: absolute; width:inherit; cursor: pointer; visibility: visible;">
                <div class="info_comments" style="position:fixed; visibility: hidden;">
                    <div class="info_comment_links" style="padding: 2px; margin-left: 5px; margin-top: 5px; float:left;background:#555; ">
                        <a href="#">
                            <span style="color:white; font-size: 9px;">Info & Comments</span>
                        </a>
                    </div>
                </div>
                <div class="main_photograph">
                    <img alt="photo name" src="_MG_6592.jpg"/>
                </div>
                <div class="photograph_title">Checkmate</div>

                <div id="test" style="visibility: hidden">test</div>
            

            </div>
            <div class="photo_comments" style="visibility: hidden;">
                <div class="five columns">
                    <div class="photograph_details" style="position: absolute; display: block;
                        width: inherit;">
                        <div class="comment_photograph" style="cursor: pointer; width: inherit;">
                            <img alt="small image" src="_MG_6592.jpg" style="width: inherit;" />
                        </div>
                        <div id="image_title">Name of photograph</div>
                        <div id="EXIF">Canon 5D mkIII</div>
                        <div id="description" style="float: left; overflow: no-display;">
                            This is the discription of the photograph.  I got fda sa fda dfad fdafa 
                            fdafda
                            fdafdafda
                            fdsafdas fds af fdafda

                        </div>
                    </div>
                </div>
                <div class="ten columns offset-by-one" style="float: right; display: block;">
<div id="disqus_thread"></div>

                </div>
            </div>        </div>
        <div id="page-navigation"> 
	<div class="left">  </div> 
	<div class="right">  </div> 
	<div class="clear">&nbsp;</div>
</div> 



        </div>
    </div><script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'markgrovesphotography'; // required: replace example with your forum shortname
    var disqus_developer = 1; // developer mode is on
    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function () {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>
</body>
</html>
